<template>
  <div>
    <div class="search-bar" style="display: flex;width: 500px;padding-bottom: 10px;" >
      <!-- 搜索输入框 -->
      <el-input v-model="email" style="width: 250px" placeholder="请输入管理员姓名...." ></el-input>
      <!-- 查询按钮 -->
      <el-button type="primary" @click="handleSearch" style="margin-left:10px">查询</el-button>
      <!-- 新增按钮 -->
      <el-button type="primary" @click="addUser">新增管理员</el-button>
      <el-button type="primary"  @click="exportExcel">导出Excel</el-button>

    </div>

    <!-- 对话框 -->
    <el-dialog
        title="管理员信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="closeDialog"
    >
      <!-- 表单内容 -->
      <el-form :model="newAdminForm" ref="adminForm" label-width="80px">
        <el-form-item label="用户名" prop="email">
          <el-input v-model="newAdminForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="newAdminForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="newAdminForm.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="user_type">
          <el-select v-model="newAdminForm.user_type" placeholder="请选择">
            <el-option
                v-for="item in userTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>

    // 表格
    <el-table
        :data="tableData"
        border
        style="width: 100%"
    >
      <el-table-column
          fixed
          prop="id"
          label="ID"
          width="80"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="email"
          label="用户名"
          width="150"
          align="center">
      </el-table-column>
      <el-table-column
          prop="user_type"
          label="类型"
          width="150"
          align="center">
        <template #default="scope">
          {{ userTypeLabel(scope.row.user_type) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码"
          width="270"
          align="center">
      </el-table-column>
      <el-table-column
          prop="validation_time"
          label="创建时间"
          width="200"
          value-format="yyyy-MM-dd"
          align="center">
      </el-table-column>
      <el-table-column
          prop="_valid"
          label="状态"
          width="80"
          align="center">
        <template #default="scope" >
          {{ scope.row._valid ? '启用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="270" align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              style="margin: 5px"
              type="primary"
          >
            修改
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              style="margin: 5px"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件，仅当有数据时显示 -->
    <div>
      <el-pagination
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          :page-sizes="[6, 10, 15, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getAdmin, addAdmin, deleteAdmin, updateAdmin} from "@/api/api";
import XLSX from "xlsx";

export default {
  name: "UserList",
  data() {
    return {
      tableData: [],
      currentPage: 1, // 初始化当前页码
      pageSize: 5, // 初始化每页显示数量,
      total: 0,
      newAdminForm: { // 新增管理员的表单数据
        email: '',
        password: '',
        user_type: '',
        confirmPassword: ''
      },
      userTypes: [
        {
          value: '1',
          label: '管理员'
        },
        {
          value: '0',
          label: '教师'
        },
      ],
      dialogVisible: false,
      email:""

    };
  },
  created() {
    this.fetchData(this.currentPage, this.pageSize); // 确保传递分页参数
  },

  methods: {
    userTypeLabel(userType) {
      const typeMap = {
        '1': '管理员',
        '0': '教师'
      };
      return typeMap[userType] || '未知';
    },
    fetchData(page, size, email = '') {
      const params = {
        page: page, // 使用传入的页码
        pageSize: size, // 使用传入的每页数量
        email: email
      };

      getAdmin(params) // 确保params对象被正确传递
          .then(res => {
            if (res.data.code === 1) {
              console.log(res.data)
              this.tableData = res.data.data.records;
              // 这里假设total存在于响应数据中，如果是其他字段，请相应调整
              this.total = res.data.data.total || 0;
            } else {
              console.error('获取数据失败');
            }

            // 新增管理员的方法
            // 首先需要验证密码是否一致等逻辑
          })
          .catch(error => {
            console.error('请求错误:', error);
          });
    },
    // 新增管理员
    addUser() {
      this.dialogVisible = true;
    },
    // 编辑管理员
    handleEdit(index, row) {
      this.newAdminForm = {...row};
      this.dialogVisible = true;
    },
    // 关闭对话框
    closeDialog() {
      this.dialogVisible = false;
      // 清空表单数据
      this.$refs.adminForm.resetFields();
    },

    // 分页
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData(currentPage, this.pageSize);
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.fetchData(this.currentPage, this.pageSize);
    },

    // 新增管理员,修改管理员
    handleSubmit() {
      if (this.newAdminForm.id) {
        // 如果表单中存在管理ID，则执行更新操作
        updateAdmin(this.newAdminForm)
            .then((response) => {
              if (response.data.code === 1) {
                this.$message.success("更新成功");
                console.log(response.data)
                this.dialogVisible = false;
                this.fetchData(this.currentPage, this.pageSize);
              } else {
                this.$message.error(response.data.msg);
              }
            }).catch(error => {
          console.error("修改管理员失败:", error);
        })
      } else {
        // 调用 API 添加管理员
        if (this.newAdminForm.password !== this.newAdminForm.confirmPassword) {
          this.$message.error("两次密码输入不一致");
        }
        addAdmin(this.newAdminForm)
            .then((res) => {
              if (res.data.code === 1) {
                console.log(res.data)
                this.$message.success("添加成功");
                this.dialogVisible = false;
                // 清空表单数据
                this.$refs.adminForm.resetFields();
                // 刷新管理员列表或重新请求数据
                this.fetchData(this.currentPage, this.pageSize);
              }
            })
            .catch(error => {
              console.error("添加管理员失败:", error);
              this.$message.error("添加管理员失败");
            });
      }
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("确定删除当前管理员吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteAdmin(row.email)
            .then((res) => {
              if (res.data.code === 1) {
                this.$message.success("删除成功");
                this.fetchData(this.currentPage, this.pageSize); // 在删除成功后调用fetchData方法重新获取管理员列表数据
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              console.error("删除管理员失败:", error);
              this.$message.error("删除管理员失败");
            })
      }).catch(() => {
        this.$message.info("已取消删除");
      })
    },
    // 搜索
    handleSearch(){
      this.fetchData(this.currentPage, this.pageSize, this.email);
    },


    // 导出数据Excel文件
    exportExcel(){
      // 准备导出的数据
      const data = this.tableData.map(item =>({
        ID: item.id,
        用户名: item.email,
        密码: item.password,
        用户类型: this.userTypeLabel(item.user_type),
        创建时间: item.validation_time,
        状态: item._valid ? '启用' : '禁用',


      }));
      // 创建一个工作簿
      const wb = XLSX.utils.book_new();
      // 将数据转换为工作表
      const ws = XLSX.utils.json_to_sheet(data);
      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(wb, ws, '管理员列表');
      // 将工作簿转换为二进制数据
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      // 将二进制数据转换为 Blob 对象
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      // 创建一个下载链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = '管理员列表.xlsx';
      link.click();
    },
  },
};
// 将字符串转换为 ArrayBuffer
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xff;
  }
  return buf;
}
</script>
<style scoped>
/* 样式保持不变 */
</style>